<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表 - 暖心助农选品平台</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        .product-card {
            height: 100%;
            transition: transform 0.2s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
        }
        
        .product-image {
            height: 200px;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
        }
        
        .farmer-info {
            font-size: 0.9em;
            color: #666;
        }
        
        .price {
            color: #e74c3c;
            font-size: 1.2em;
            font-weight: bold;
        }
        
        .category-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8em;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container py-5">
        <!-- 搜索和筛选 -->
        <div class="row mb-4">
            <div class="col-md-8">
                <form class="d-flex" method="get" th:action="@{/products}">
                    <input class="form-control me-2" type="search" placeholder="搜索商品..." 
                           name="search" th:value="${param.search}">
                    <button class="btn btn-success" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
            <div class="col-md-4">
                <select class="form-select" onchange="window.location.href=this.value">
                    <option value="/products">全部分类</option>
                    <option th:each="category : ${categories}"
                            th:value="@{/products(category=${category})}"
                            th:text="${category}"
                            th:selected="${param.category == category}">
                    </option>
                </select>
            </div>
        </div>

        <!-- 商品列表 -->
        <div class="row g-4">
            <div class="col-md-4 col-lg-3" th:each="product : ${products.records}">
                <div class="card product-card h-100 border-0 shadow-sm">
                    <span class="category-badge" th:text="${product.category}"></span>
                    <img th:src="${product.image}" class="product-image" alt="商品图片">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${product.name}"></h5>
                        <p class="card-text text-muted" 
                           th:text="${#strings.length(product.description) > 50 ? 
                                    #strings.substring(product.description, 0, 50) + '...' : 
                                    product.description}">
                        </p>
                        <div class="farmer-info mb-2">
                            <i class="fas fa-user-circle"></i>
                            <span th:text="${product.farmer.realName}"></span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="price">
                                ¥<span th:text="${#numbers.formatDecimal(product.price, 1, 2)}"></span>
                            </span>
                            <a th:href="@{/products/{id}(id=${product.id})}" 
                               class="btn btn-outline-success">
                                <i class="fas fa-info-circle me-1"></i>详情
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <nav class="mt-4" th:if="${products.total > 0}">
            <ul class="pagination justify-content-center">
                <li class="page-item" th:classappend="${products.current == 1 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/products(page=${products.current - 1},
                            size=${products.size}, category=${param.category}, search=${param.search})}">
                        上一页
                    </a>
                </li>
                <li class="page-item" th:each="i : ${#numbers.sequence(1, products.pages)}"
                    th:classappend="${i == products.current ? 'active' : ''}">
                    <a class="page-link" th:href="@{/products(page=${i},
                            size=${products.size}, category=${param.category}, search=${param.search})}"
                       th:text="${i}">
                    </a>
                </li>
                <li class="page-item" th:classappend="${products.current == products.pages ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/products(page=${products.current + 1},
                            size=${products.size}, category=${param.category}, search=${param.search})}">
                        下一页
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 无商品提示 -->
        <div class="text-center py-5" th:if="${products.total == 0}">
            <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">暂无商品</h4>
            <p class="text-muted">换个关键词试试吧</p>
        </div>
    </div>

    <!-- Bootstrap JS 和 Popper.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html> 